<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			 //ready（）事件源语法   $(document).ready(function(){})
			 //              简写： $(function(){})
			 //总结：页面元素全部加载完毕，在执行JQ相关操作
			 //script元素放在最后一个body位置【可不换】
			 $(function(){
			  //固定值：页面顶部到吸顶灯位置    
			   //offset() 获取或者设置元素相对于文档偏移量
			   //offset().top 从顶部到吸顶灯元素的偏移量
			    var se=$("#sticky_element").offset().top;
			    
				//滚动值：BOM对象+事件源 scroll()
				//$(window) 抓取页面window对象，监听窗口事件：窗口改变，滚动
				//理解：实时抓取页面滚动值
				$(window).scroll(function(){
					//滚动值：获取页面滚动位置
					//scfrollTop()获取页面滚动垂直距离
					var st=$(window).scrollTop();
				
				  //判断 滚动值大于固定值，滚动超过固定实现切换
				  if(st>se){
					  //条件成立：大于200px切换吸顶效果
					  $("#sticky_element").addClass("sticky");
				  }else{
					   $("#sticky_element").removeClass("sticky");
				  }
				});
			   
		
			});
		</script>
		<style>
			#top_context{
				height: 200px;
				color: #000;
				background-color: #e0e0e0;
				line-height: 200px;
				text-align: center;
			}
			#sticky_element{
				height: 30px;
				background-color: #000;
				text-align: center;
				line-height: 30px;
				color: #fff;
			}
			#main_context{
				height: 5000px;
				background-color: #e0e0e0;
			}
			/* 切换样式：吸顶灯卡在页面顶部 */
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="top_context">顶部内容区域</div>
		<div id="sticky_element">我是吸顶元素</div>
		<div id="main_context">每当想起你时</div>
		
	</body>
</html>

<!--  //吸顶灯效果 【了解】BOM案例：浏览器6个对象的方法使用 
			   //思路：1.鼠标滚动，滚送吸顶灯元素位置出  效果改变
			   //     2.页面顶部到吸顶灯位置：200px
			   //     3.追加一个样式：固定定位，页面顶部位置
			   
			   //     1.追加样式：吸顶灯卡在页面顶部
			   //     2.固定值：页面顶部到吸顶灯位置
			// 3.固定值<滚动值  滚动范围超出200px，实现切换	
				
				
				-->